vue-cli 攻略

一、快速入门

1.1 简介

Vue 脚手架（vue-cli），使用它可以快速创建 Vue 项目

1.2 安装

全局安装 vue-cli

安装后 cmd 输入 vue -V 可以查看对应的版本

$ npm install -g vue-cli

全局安装 webpack

$ npm install -g webpack

1.3 生成项目

cmd

$ vue init webpack project-name

project-name 为要生成的项目名称，不加则在当前目录下生成，之后根据需求选择对应的配置项

$ vue init webpack
// 在当前目录生成
? Generate project in current directory? (Y/n)
? Generate project in current directory? Yes
// 项目名称
? Project name project-name
// 项目描述
? Project description (A Vue.js project)
? Project description A Vue.js project
// 作者
? Author (yaozhanxin <yaozhanxin@qq.com>)
? Author yaozhanxin <yaozhanxin@qq.com>
// 选择打包方式，默认即可    
? Vue build (Use arrow keys)
? Vue build standalone
// 使用 vue-router
? Install vue-router? (Y/n)
? Install vue-router? Yes
// 是否启用 eslint 检测规则
? Use ESLint to lint your code? (Y/n)
? Use ESLint to lint your code? Yes
// 选择 eslint 的规则
? Pick an ESLint preset (Use arrow keys)
? Pick an ESLint preset Standard
// 是否安装单元测试
? Set up unit tests (Y/n)
? Set up unit tests Yes
// 选择对应的单元测试
? Pick a test runner (Use arrow keys)
? Pick a test runner jest
// 是否安装 e2e 测试
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
// 是否自动安装依赖项
? Should we run `npm install` for you after the project has been created? (reco
? Should we run `npm install` for you after the project has been created? (reco
mmended) npm

   vue-cli · Generated "project-name".

To get started:

  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

如果用 npm 下载时遇到 ChromeDriver 报错的问题，可以设置 ChromeDriver 的源。

npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
yarn config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

1.4 启动项目

$ npm run dev

http://localhost:8080

默认运行在 8080 端口，成功启动可看到欢迎界面。

二、目录结构

build 构建脚本目录，存放构建项目时所需要的配置

config 构建配置目录，可此目录下的 index.js 中 port 修改启动的端口号，assetsPublicPath 修改 build 的路径前缀，如果需要在本地打开打包后的文件，需要将 build 的路径前缀修改为 ‘ ./ ‘（原本为 ‘ / ‘），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ‘ / ‘ 开头，在本地是无法找到对应文件的（服务器上没问题）。

node_modules =》 依赖项

src =》 源码目录

— assets =》 资源目录

— components =》 组件目录，可用来存放一些公共的、可复用的组件

— router =》 路由配置

— App.vue =》 页面级的 Vue 组件，存放当前页面的所有组件

— main.js =》 页面入口的 js 文件，在此文件内引入项目所需的第三方包

static =》 静态文件目录

test =》 测试文件目录

.babelrc =》 Babel 的配置

.editorconfig =》 统一代码风格工具

.eslintignore =》 eslint 忽略检测的文件

.eslintrc.js =》 eslint 语法检测规则

.gitignore =》

.postcssrc.js =》 css 预处理

index.html =》 页面入口

package-lock.json =》

package.json =》

README.md =》

三、打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后，可以输入 npm run build 来进行打包工作

$ npm run build

打包目录完成后，会在项目根目录生成 dist 文件夹，如果修改了文件路径，可以直接打开本地文件查看，项目上线时，只需要将 dist 文件夹放到服务器就可以了。

“dev”: “webpack-dev-server –inline –open –progress –config build/webpack.dev.conf.js”